<script setup lang='ts'>
import {getPostImage, getPosts} from "@/api";
import {onMounted, onUnmounted, ref} from "vue";
import {ImageSource, RootDataItem} from "@/api/type";
let timer: string | number | NodeJS.Timeout | undefined
const bigPost = ref<RootDataItem>()
const posts = ref<RootDataItem[]>([])
getPosts().then((res) => {
  //只要5条
  posts.value = res as unknown as RootDataItem[];
  posts.value = posts.value.slice(0, 5);
  posts.value.forEach((item) => {
    getPostImage(item._links["wp:featuredmedia"][0].href).then((res) => {
      item.image = res.source_url;
    });
  });
  bigPost.value = posts.value[0];
  posts.value = posts.value.slice(1);
});

const goNewsHome = () => {
  //跳转https://gamefi.ask4coin.com
  window.location.href = "https://gamefi.ask4coin.com";
};

onMounted(() => {
  timer= setInterval(getPosts, 1000*60,{immediate: true});
});
onUnmounted(() => {
  clearInterval(timer)
})
</script>

<template>
<div class="h-screen flex items-center justify-center">
  <div class="xl:px-24 md:px-12">
    <div class="grid grid-cols-2  gap-4">
      <div class="relative z-20 w-full h-full shadow-md" @click.stop="goNewsHome">
        <div class="w-full h-full">
          <img class="w-full rounded-md h-full object-cover " :src="bigPost?.image" alt=""/>
        </div>
        <div class="absolute block px-10 py-5 w-full bottom-8">
          <div class=" font-bold text-jacarta-50 text-xl">
            {{bigPost?.title.rendered}}
          </div>
        </div>
      </div>
      <div class="flex flex-col space-y-2 justify-between">
        <div @click.stop="goNewsHome" class="relative z-20 flex grid grid-cols-12 p-4 space-x-4 shadow-sm rounded-md dark:shadow-jacarta-500 bg-white dark:bg-jacarta-600 dark:text-white" v-for="item in posts">
          <div class="flex col-span-3 items-center justify-center">
            <img class= "rounded-lg w-full md:h-12 lg:h-16  xl:h-32   object-cover" :src="item.image" alt=""/>
          </div>
          <div class="flex col-span-9 flex-col justify-center p-4">
            <div class="lg:text-xl sm:text-sm font-bold sm:line-clamp-1">
              {{item.title.rendered}}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</template>

<style scoped>
.block {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background-color: rgba(100,116,139, 0.5);
}
</style>